<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>AnyGraph Examples</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="图形系统开发实战:进阶篇 示例">
    <meta name="author" content="hjq">
    <meta name="keywords" content="canvas,anygraph,javascript">

    <script src="../script/lib/jquery-1.11.2.min.js"></script>
    <link rel="stylesheet" href="./css/bootstrap5.min.css">   
    <link rel="stylesheet" href="./css/styles.css">
    
<body>
<!-- ***** Header Area Start ***** -->
<header class="header-area header-sticky background-header">
    <p class="title">AnyGraph Examples</p>
</header>
<!-- ***** Header Area End ***** -->

<!-- ******Examples****** -->
<section id="examples" class="examples section">
    <div class="container">
        <div class="row">
            <!-- <div class="clearfix visible-md-block visible-lg-block"></div> -->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">装入数组数据</h3>
                    <a target="_blank" href="./03_layer/format_geom.html"><img alt="示例" src="./images/01-duck.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">装入外部数据</h3>
                    <a target="_blank" href="./03_layer/source_load_file.html"><img alt="示例" src="./images/01-geom.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">加载GeoJSON格式数据</h3>
                    <a target="_blank" href="./03_layer/format_geojson.html"><img alt="示例" src="./images/01-geojson.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">加载SVG格式数据</h3>
                    <a target="_blank" href="./03_layer/format_svg.html"><img alt="示例" src="./images/01-svg.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">加载CIM/G格式数据</h3>
                    <a target="_blank" href="./03_layer/format_cimg.html"><img alt="示例" src="./images/01-cimg.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">加载电网数据</h3>
                    <a target="_blank" href="./03_layer/format_adam.html"><img alt="示例" src="./images/01-adam.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">交通路网系统</h3>
                    <a target="_blank" href="./10_road/sz_road_part.html"><img alt="示例" src="./images/01-road.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">内置点</h3>
                    <a target="_blank" href="./04_geom/point1.html"><img alt="示例" src="./images/02-01.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">图标点</h3>
                    <a target="_blank" href="./04_geom/point2.html"><img alt="示例" src="./images/02-02.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">矩形</h3>
                    <a target="_blank" href="./04_geom/rect.html"><img alt="示例" src="./images/02-07.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">折线</h3>
                    <a target="_blank" href="./04_geom/polyline.html"><img alt="示例" src="./images/02-03.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">多边形</h3>
                    <a target="_blank" href="./04_geom/polygon1.html"><img alt="示例" src="./images/02-04.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">文字</h3>
                    <a target="_blank" href="./04_geom/text1.html"><img alt="示例" src="./images/02-05.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">箭头</h3>
                    <a target="_blank" href="./04_geom/line_arrow2.html"><img alt="示例" src="./images/02-06.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">坐标转换</h3>
                    <a target="_blank" href="./05_pan_zoom/getCoordinateFromPixel.html"><img alt="示例" src="./images/04-07.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">平移和缩放1</h3>
                    <a target="_blank" href="./05_pan_zoom/zoom_anygraph.html"><img alt="示例" src="./images/04-01.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">平移和缩放2</h3>
                    <a target="_blank" href="./05_pan_zoom/zoom_anygraph.html"><img alt="示例" src="./images/04-02.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">拾取(几何法)</h3>
                    <a target="_blank" href="./06_picker/collide_geom.html"><img alt="示例" src="./images/05-01.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">拾取(取色法)</h3>
                    <a target="_blank" href="./06_picker/collide_color.html"><img alt="示例" src="./images/05-02.png" /></a>
                </div><!--//example-->
            </div><!--//item-->

            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">视点控制(显示缺省位置)</h3>
                    <a target="_blank" href="./07_view_animal/view_default.html"><img alt="示例" src="./images/04-05.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">视点控制(显示全图)</h3>
                    <a target="_blank" href="./07_view_animal/view_full.html"><img alt="示例" src="./images/04-03.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">视点控制(显示指定位置)</h3>
                    <a target="_blank" href="./07_view_animal/view_center.html"><img alt="示例" src="./images/04-04.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">视点控制(显示指定位置)</h3>
                    <a target="_blank" href="./07_view_animal/animal_move.html"><img alt="示例" src="./images/04-06.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">缓动</h3>
                    <a target="_blank" href="./07_view_animal/easing_num.html"><img alt="示例" src="./images/06-01.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">运动的小球</h3>
                    <a target="_blank" href="./07_view_animal/easing_balls_gradient.html"><img alt="示例" src="./images/06-02.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">呼吸灯</h3>
                    <a target="_blank" href="./07_view_animal/easing_light.html"><img alt="示例" src="./images/06-03.png" /></a>
                </div><!--//example-->
            </div><!--//item-->

            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">线性渐变</h3>
                    <a target="_blank" href="./08_style/gradient-rect.html"><img alt="示例" src="./images/08-03.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">径向渐变</h3>
                    <a target="_blank" href="./08_style/gradient.html"><img alt="示例" src="./images/08-02.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">渐变效果</h3>
                    <a target="_blank" href="./08_style/gradient-svg.html"><img alt="示例" src="./images/08-04.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">图案填充</h3>
                    <a target="_blank" href="./08_style/pattern-text.html"><img alt="示例" src="./images/08-09.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">对象透明度</h3>
                    <a target="_blank" href="./08_style/opacity-image.html"><img alt="示例" src="./images/08-07.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">图层透明度</h3>
                    <a target="_blank" href="./08_style/opacity-layer.html"><img alt="示例" src="./images/08-08.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">阴影效果</h3>
                    <a target="_blank" href="./08_style/shadow.html"><img alt="示例" src="./images/08-10.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">滤镜</h3>
                    <a target="_blank" href="./08_style/filter.html"><img alt="示例" src="./images/08-05.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12">
                <div class="example">
                    <h3 class="sub-title">多个滤镜</h3>
                    <a target="_blank" href="./08_style/filters.html"><img alt="示例" src="./images/08-06.png" /></a>
                </div><!--//example-->
            </div><!--//item-->
            
        </div><!--//row-->
    </div><!--//container-->
</section><!--//examples-->

</body>
</html>
